<template>
	<div>
		<div class="bigbox01">
			<div class="box01" v-for="el in arr">
				<img :src="el.img">
				<span>{{el.data}}</span>
			</div>
			
		</div>
		<div class="bigbox02">
			<div class="box02" v-for="el in arr2">
				<img :src="el.img">
				<span>{{el.data}}</span>
			</div>
			
		</div>
	</div>
</template>

<script setup>
	import {ref} from "vue"
	import img01 from "../public/img/i01.png"
	import img02 from "../public/img/i02.png"
	import img03 from "../public/img/i03.png"
	import img04 from "../public/img/i04.png"
	import img05 from "../public/img/i05.png"
	import img06 from "../public/img/i06.png"
	import img07 from "../public/img/i07.png"
	import img08 from "../public/img/i08.png"
	import img09 from "../public/img/i09.png"
	import img10 from "../public/img/i10.png"
	import img11 from "../public/img/i11.png"
	import img12 from "../public/img/i12.png"
	
	
	let arr=ref([{
		img:img01,
		data:"设计策略"
	},
	{
		img:img02,
		data:"设计思维"
	},
	{
		img:img03,
		data:"色彩设计"
	},
	{
		img:img04,
		data:"服务设计"
	},
	{
		img:img05,
		data:"用研基础"
	},
	{
		img:img06,
		data:"版式设计"
	}])
	
	
	
	let arr2=ref([{
		img:img07,
		data:"Photoshop"
	},
	{
		img:img08,
		data:"Midjourney"
	},
	{
		img:img09,
		data:"lllustrator"
	},
	{
		img:img10,
		data:"After Effects"
	},
	{
		img:img11,
		data:"C4D"
	},
	{
		img:img12,
		data:"Blender"
	}])
	
	
	// let arrdata01=ref([
	// 	"设计策略","设计思维","色彩设计","服务设计","用研基础","版式设计"
	// ])
	// let arrdata02=ref([
	// 	"Photoshop","Midjourney","lllustrator","After Effects","C4D","Blender"
	// ])

</script>

<style scoped>
	img {
		width: 31px;
		height: 31px;
		    overflow-clip-margin: content-box;
		    overflow: clip;
			margin-right: 10px;
	}
	.bigbox02,
	.bigbox01 {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	.box01,
	.box02 {
		display: flex;
		align-items: center;
		width: 170px;
		height: 50px;
		/* display: flex; */
	}
</style>